<template>
	<view class="showCommodity__time-kill">
		<view class="picture">
			<image :src="src?src:defimg" mode="aspectFill"></image>
		</view>
		<view class="commodity">
			<view class="title">{{title}}</view>
			<view class="classify">
				<view class="classify-item">{{classify}}</view>
			</view>
			<view class="sold-out">
				<view class="jindutiao">
					<view class="iconfont iconhuore-s"></view>
					<view>已经拼{{sellCount}}件</view>
				</view>
				<view class="sold-count">{{people}}人团</view>
			</view>
			<view class="price-buy-content">
				<view class="price-content">
					<view class="price">￥{{price}}</view>
					<view class="old-price">￥{{oldPrice}}</view>
				</view>
				<view class="but-btn" @tap="handelClick">立即抢购</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			id: {
				type: [String, Number],
				default: ''
			},
			title: {
				type: [String],
				default: ''
			},
			classify: {
				type: String,
				default: '通用'
			},
			price: {
				type: [String, Number],
				default: 0
			},
			oldPrice: {
				type: [String, Number],
				default: 0
			},
			people: {
				type: [String, Number],
				default: 0
			},
			sellCount: {
				type: [String, Number],
				default: 0
			},
			src: {
				type: String,
				default: ''
			},
			showSubmit: {
				type: [String, Boolean],
				default: false
			}
		},
		data() {
			return {

			}
		},
		methods: {
			handelClick() {
				this.$emit('event', this.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.showCommodity__time-kill {
		display: flex;
		background-color: #FFFFFF;
		box-sizing: border-box;

		.picture {
			image {
				width: 200upx;
				height: 200upx;
				background-color: #F5F3F4;
			}
		}

		.commodity {
			margin-left: 30upx;
			width: calc(100% - 230upx);

			.title {
				width: 100%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				line-height: 40upx;
				color: #333333;
				opacity: 1;
			}

			.classify {
				display: flex;

				.classify-item {
					width: 100%;
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					line-height: 34upx;
					color: #AE7A1F;
					opacity: 1;
					padding-right: 6upx;
					margin-right: 6upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				.classify-item:last-child {
					border: none;
				}
			}

			.sold-out {
				display: flex;
				margin-top: 20upx;

				.jindutiao {
					padding: 0 10upx;
					height: 32upx;
					background: #FFF6F6;
					opacity: 1;
					border-radius: 16upx;
					display: flex;
					justify-content: center;

					view {
						text-align: center;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 30upx;
						color: #F79EA3;
						opacity: 1;
					}

					.iconfont {
						color: #E1212B;
						margin-right: 4upx;
					}
				}

				.sold-count {
					margin-left: 20upx;
					font-size: 20upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					opacity: 1;
				}
			}

			.price-buy-content {
				display: flex;
				margin-top: 20upx;
				width: 100%;
				box-sizing: border-box;

				.price-content {
					display: flex;
					padding-top: 10upx;

					.price {

						font-size: 28upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						line-height: 40upx;
						color: #E43841;
						opacity: 1;
					}

					.old-price {
						position: relative;
						margin-left: 10upx;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						line-height: 40upx;
						color: #999999;
						opacity: 1;
					}

					.old-price:after {
						content: '';
						position: absolute;
						width: 100%;
						height: 2upx;
						background-color: #999999;
						top: 19upx;
						left: 0;
					}
				}

				.but-btn {
					margin-left: auto;
					width: 150upx;
					height: 60upx;
					line-height: 60upx;
					background: #FE8025;
					opacity: 1;
					border-radius: 30upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					text-align: center;
				}
			}
		}
	}
</style>
